<template>
    <div class="box">
        <a-row type="flex" justify="space-between">
            <a-col class="headline" :span="12">系统报警配置</a-col>
        </a-row>

        <div class="warningNotice">
            <div class="mailbox">
                <div class="mailbox-title">
                    <span style="margin-right: 10px">邮箱报警</span>
                    <a-switch v-model:checked="isMailWarning" />
                </div>
                <div>
                    <a-row>
                        <a-col v-for="(item, index) in warningMailList" :key="index" style="margin: 10px">
                            <a-checkbox :value="item.value" v-model:checked="item.enable"> {{ item.value }}</a-checkbox>
                            <span @click="handleEdit(index, 'MAIL')" style="cursor: pointer"><EditOutlined /></span>
                        </a-col>
                    </a-row>
                </div>

                <a-button @click="handleAdd('MAIL')">
                    <template #icon><PlusOutlined /> </template>
                </a-button>
            </div>
            <div class="mailbox">
                <div class="mailbox-title">
                    <span style="margin-right: 10px">短信通知</span>
                    <a-switch v-model:checked="isSms" />
                </div>
                <div>
                    <a-row>
                        <a-col v-for="(item, index) in warningMobileList" :key="index" style="margin: 15px">
                            <a-checkbox :value="item.value" v-model:checked="item.enable"> {{ item.value }}</a-checkbox>
                            <span @click="handleEdit(index, 'MOBILE')" style="cursor: pointer"> <EditOutlined /></span>
                        </a-col>
                    </a-row>
                </div>

                <a-button @click="handleAdd('MOBILE')">
                    <template #icon> <PlusOutlined /> </template>
                </a-button>
            </div>
        </div>
        <a-row type="flex" justify="end">
            <a-button @click="handleSave" type="primary" ghost style="margin-top: 10px">保存</a-button>
        </a-row>
        <a-modal v-model:visible="visible" :title="isAdd ? '新增' : '编辑'" @ok="handleOk">
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item :label="type === 'MAIL' ? '邮箱' : '手机号码'">
                    <a-input v-model:value="addData.value" />
                    <a-button type="primary" v-if="type === 'MAIL'"> 验证邮箱地址</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, toRefs, UnwrapRef } from 'vue';
import { editMerchantExpand } from '@/api/merchant';
import { message } from 'ant-design-vue';
interface listData {
    warningMailList: Array<any>;
    warningMobileList: Array<any>;
    visible: boolean;
    isAdd: boolean;
    type: string;
    index: number;
}

interface FormState {
    addData: any;
}

export default defineComponent({
    props: {
        data: {
            type: Object,
            default: () => false,
        },
    },
    setup(props) {
        const state = reactive({
            isMailWarning: 0,
            isSms: 0,
            warningMail: '',
            warningMobile: '',
            id: 0,
        });
        const listData: listData = reactive({
            warningMailList: [],
            warningMobileList: [],
            isAdd: false,
            visible: false,
            type: 'MAIL',
            index: 0,
        });
        const formState: UnwrapRef<FormState> = reactive({
            addData: {
                value: '',
                enable: false,
            },
        });
        watch(
            () => props.data,
            (data) => {
                const { isMailWarning, isSms, warningMail, warningMobile, id } = data as NormalObj;
                state.isSms = isSms;
                state.isMailWarning = isMailWarning;
                state.id = id;
                listData.warningMailList = JSON.parse(warningMail);
                listData.warningMobileList = JSON.parse(warningMobile);
            }
        );

        const handleSave = async () => {
            // const params = { ...merchantExpandData.value };
            // await editMerchantExpand({
            //     ...params,
            //     isSms: params.isSms ? 1 : 0,
            //     isMailWarning: params.isMailWarning ? 1 : 0,
            // });

            const data = {
                isMailWarning: state.isMailWarning,
                isSms: state.isSms,
                id: state.id,
                warningMail: JSON.stringify(listData.warningMobileList),
                warningMobile: JSON.stringify(listData.warningMobileList),
            };
            console.log(data);

            await editMerchantExpand(data);

            message.success('保存成功');
        };

        const handleOk = async () => {
            let addData = { ...formState.addData };
            if (listData.isAdd) {
                if (listData.type === 'MAIL') {
                    listData.warningMailList.push(addData);
                } else {
                    listData.warningMobileList.push(addData);
                }
            } else {
                if (listData.type === 'MAIL') {
                    listData.warningMailList[listData.index].value = addData.value;
                } else {
                    listData.warningMobileList[listData.index].value = addData.value;
                }
            }

            await editMerchantExpand({
                id: state.id,
                warningMail: JSON.stringify(listData.warningMobileList),
                warningMobile: JSON.stringify(listData.warningMobileList),
            });
            listData.visible = false;
            message.success('保存成功');
        };

        const handleEdit = (index: number, type: string) => {
            if (type === 'MAIL') {
                formState.addData.value = listData.warningMailList[index].value;
                // formState.addData.enable = listData.warningMailList[index].enable;
            } else {
                formState.addData.value = listData.warningMobileList[index].value;
                // formState.addData.value = listData.warningMobileList[index].enable;
            }
            listData.index = index;
            listData.isAdd = false;
            listData.visible = true;
            listData.type = type;
        };

        // 表单校验

        const handleAdd = (type: string) => {
            listData.type = type;
            listData.isAdd = true;
            listData.visible = true;
            // modelRef.value = '';
            formState.addData.value = '';
        };

        return {
            ...toRefs(listData),
            ...toRefs(state),
            ...toRefs(formState),
            handleSave,
            handleAdd,
            handleOk,
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            handleEdit,
        };
    },
});
</script>

<style lang="scss" scoped>
.warningNotice {
    .mailbox {
        display: flex;
        align-items: center;
    }
}
</style>
